<template>
  <div>
    <div class="toolbar">
        <Select v-model="query.type" style="width:120px">
            <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        <Input v-model="query.keyword" placeholder="关键字" suffix="ios-search" style="width: 200px" />
        <DatePicker v-model="timeRange" type="datetimerange" placeholder="选择时间范围" 
        style="width: 300px" format="yyyy-MM-dd HH:mm:ss" :value="timeRange"></DatePicker>
        <Button icon="ios-search" @click="search">查询</Button>
        <Button icon="ios-refresh">刷新</Button>
        <Button icon="ios-trash-outline">删除</Button>
      </div>
    <div>
      <Table :data="data" :columns="column" stripe></Table>
      <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
          <Page :total="page.total" :current="page.index" :page-size="page.size" @on-change="changePage"
          :show-total="true" :show-elevator="true" :show-sizer="true" @on-page-size-change="changePageSize"></Page>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getLogData } from "@/api/data/";
import { dateTimeFormat } from "@/libs/util/";
import { constants } from 'crypto';
export default {
  data() {
    return {
      data: [],
      column: [
        { title: "ip", key: "ip",width:120 },
        { title: "url", key: "url",width:150 },
        { title: "操作用户", key: "addUserName",width:100 },
        {
          title: "操作类型",
          key: "category",
          width:100,
          render: (h, params) => {
            var type = "";
            switch (params.row.category) {
              case 1:
                type = "系统日志";
                break;
              case 2:
                type = "操作日志";
                break;
              case 3:
                type = "登录日志";
                break;
              case 4:
                type = "请求日志";
                break;
            }
            return h("div", type);
          }
        },
        { title: "等级", key: "level",width:80 },
        { title: "信息", key: "msg",width:300 },
        { title: "异常", key: "exception",width:300 },
        { title: "时间", key: "addTime",width:200 }
      ],
      query: { keyword: "", startTime: "", endTime: "",type:1 },
      page: { index: 1, size: 10, orderBy: "desc", field: "addTime" },
      timeRange:[],
      typeList: [
          {label:'系统日志',value:1},
          {label:'操作日志',value:2},
          {label:'登录日志',value:3},
          {label:'请求日志',value:4}
      ]
    };
  },
  mounted() {
    var time = new Date().getTime() - 24 * 60 * 60 * 1000;
    var yesday = new Date(time); // 获取的是前一天日期
    this.timeRange=[yesday,new Date()];
    this.loadData();
  },
  methods: {
    loadData() {
      this.query.startTime=this.timeRange[0];
        this.query.endTime=this.timeRange[1];
        this.page.query=JSON.stringify(this.query);
      getLogData(this.page).then(
        res => {
          var data = res.data;
          console.log(data.data);
          if (data.status != 200) {
            this.$Message.info(data.msg);
          } else {
            this.data = data.data.data;
            this.page.total=data.data.pageCount;
          }
        }
      );
    },
    changePage(index) {
        this.page.index=index;
        this.loadData();
    },
    search() {
        console.log(this.timeRange);
        this.loadData();
    },
    changePageSize(size) {
        this.page.size=size;
        this.loadData();
    }
  }
};
</script>

